
/**
 * BEM block（模块）
 * @param {string} $prefix 前缀
 * @param {array} $blocks 名称
 */

@mixin block($prefix, $blocks...) {
  $selectors: null;

  @each $block in $blocks {
    $selectors: append($selectors, unquote('.' + $prefix + '-' + $block), comma);
  }

  #{$selectors} {
    @content;
  }
}



/**
 * BEM block（模块）
 * @param {string} $prefix 前缀
 * @param {array} $blocks 名称
 */
@mixin b($blocks...) {
  @include block(b, $blocks...) {  
    @content;
  }
}

/**
 * BEM element（元素）
 * @param {array} $elements 名称
 */
@mixin e($elements...) {
  $selectors: null;

  @each $element in $elements {
    $selectors: append($selectors, unquote('&' + $bem-separator-element + $element), comma);
  }

  #{$selectors} {
    @content;
  }
}

/**
 * BEM modifier（修饰符）
 * @param {array} $modifiers 名称
 */
@mixin m($modifiers...) {
  $selectors: null;

  @each $modifier in $modifiers {
    $selectors: append($selectors, unquote('&' + $bem-separator-modifier + $modifier), comma);
  }

  #{$selectors} {
    @content;
  }
}




/**
 * 文字垂直居中
 * @param {string} $height 高度
 */
@mixin text--middle($height) {
  height: $height;
  line-height: $height;
}

/**
 * 块级元素水平居中
 * @param {string} $width 宽度
 */
@mixin block--center() {
  margin-left: auto;
  margin-right: auto;
}

/**
 * 链接块化
 * @param {string} $width 宽度
 * @param {string} $height 高度
 */
@mixin link--block($width, $height) {
  display: block;
  text-decoration: none;
  width: $width;
  height: $height;
}

/**
 * 图片块化
 * @param {string} $width 宽度
 * @param {string} $height 高度
 */
@mixin img--block($width, $height) {
  display: block;
  width: $width;
  height: $height;
}

/**
 * 字体
 * @param {array} $fonts 字体列表
 * @param {number} $index 字体列表索引
 */
@mixin _font($fonts, $index) {
  $font: nth($fonts, $index);
  $font-size: nth($font, 1);

  font-size: $font-size;

  @if (length($font) == 2) {
    font-weight: nth($font, 2);
  }

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

/**
 * 字体
 * @param {array} $fonts 字体列表
 * @param {number} $index 字体列表索引
 */
@mixin _font-for-debug($fonts, $index) {
  $font: nth($fonts, $index);
  $font-size: nth($font, 1);

  @if (length($font) == 2) {
    font-weight: nth($font, 2);
  }

  font-size: $font-size * 2;
}

/**
 * 清除浮动
 */
@mixin clearfix() {
  &::before,
  &::after {
    content: "";
    display: table;
  }

  &::after {
    clear: both;
  }
}

/**
 * margin
 * @param {string} $top 顶部 margin
 * @param {string} $right 右边 margin
 * @param {string} $bottom 底部 margin
 * @param {string} $left 左边 margin
 */
@mixin margin($top: null, $right: null, $bottom: null, $left: null) {
  @if $top != null {
    margin-top: $top;
  }

  @if $right != null {
    margin-right: $right;
  }

  @if $bottom != null {
    margin-bottom: $bottom;
  }

  @if $left != null {
    margin-left: $left;
  }
}

/**
 * padding
 * @param {string} $top 顶部 padding
 * @param {string} $right 右边 padding
 * @param {string} $bottom 底部 padding
 * @param {string} $left 左边 padding
 */
@mixin padding($top: null, $right: null, $bottom: null, $left: null) {
  @if $top != null {
    padding-top: $top;
  }

  @if $right != null {
    padding-right: $right;
  }

  @if $bottom != null {
    padding-bottom: $bottom;
  }

  @if $left != null {
    padding-left: $left;
  }
}

/**
 * 文字超出部分用省略号代替
 * @param {number} $lines 文字行数
 */
@mixin text--overflow($lines: 1) {
  overflow: hidden;

  @if $lines == 1 {
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else { /* stylelint-disable-line */
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

/**
 * 仅 IE8 可用
 * @param {string} $property 属性
 * @param {string} $value 值
 */
@mixin only-ie8($property, $value) {
  @if $supports-ie8 {
    #{$property}: $value + \9;
  }
}

/**
 * 相对定位
 * @param {string} $top 顶部位置
 * @param {string} $right 右边位置
 * @param {string} $bottom 底部位置
 * @param {string} $left 左边位置
 */
@mixin position--relative($top: null, $right: null, $bottom: null, $left: null) {
  position: relative;

  @if $top != null {
    top: $top;
  }

  @if $right != null {
    right: $right;
  }

  @if $bottom != null {
    bottom: $bottom;
  }

  @if $left != null {
    left: $left;
  }
}

/**
 * 绝对定位
 * @param {string} $top 顶部位置
 * @param {string} $right 右边位置
 * @param {string} $bottom 底部位置
 * @param {string} $left 左边位置
 */
@mixin position--absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;

  @if $top != null {
    top: $top;
  }

  @if $right != null {
    right: $right;
  }

  @if $bottom != null {
    bottom: $bottom;
  }

  @if $left != null {
    left: $left;
  }
}

/**
 * 固定定位
 * @param {string} $top 顶部位置
 * @param {string} $right 右边位置
 * @param {string} $bottom 底部位置
 * @param {string} $left 左边位置
 */
@mixin position--fixed($top: null, $right: null, $bottom: null, $left: null) {
  position: fixed;

  @if $top != null {
    top: $top;
  }

  @if $right != null {
    right: $right;
  }

  @if $bottom != null {
    bottom: $bottom;
  }

  @if $left != null {
    left: $left;
  }
}

/**
 * 兼容 IE8 的 display: inline-block
 */
@mixin inline--block() {
  display: inline-block;

  @include only-ie8(display, inline);
  @include only-ie8(zoom, 1);
}

/**
 * 设置宽高
 * @param {string} $width 宽
 * @param {string} $height 高
 */
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

/**
 * 圆
 * @param {string} $diameter 直径
 */
@mixin circle($diameter) {
  width: $diameter;
  height: $diameter;
  border-radius: 50%;
}

/**
 * 横线
 * @param $margin-top {string} 顶部间距
 * @param $margin-bottom {string} 底部间距
 * @param $color {string} 横线颜色
 */
@mixin hr($margin-top: 0, $margin-bottom: 0, $color: #000) {
  height: 1px;
  border: 0;
  border-top: 1px solid $color;
  margin-top: $margin-top;
  margin-bottom: $margin-bottom;
  display: block;
}

/**
 * 紧贴顶部
 */
@mixin header--sticky {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

/**
 * 紧贴底部
 */
@mixin footer--sticky {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

/**
 * 隐藏文字
 */
@mixin text--hide {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

    /**
   * flex布局
   
   */
   @mixin flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@mixin flex-bw {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

@mixin flex-sa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content:space-around;
}

@mixin flex-cl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@mixin flex-cl-notc{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

